// 声明字体
@font-face {
  font-family: 'fz';
  src: url('https://essence.jzvcode.com/feihe/images/fz.ttf') format('truetype');
}
@font-face {
  font-family: 'fz-bold';
  src: url('https://essence.jzvcode.com/feihe/images/fz-bold.ttf')
    format('truetype');
}

.record {
  background: #eee;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  &-bg {
    width: 100%;
    height: 600rpx;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top center;
  }
  &-content {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    padding: 52rpx;
    box-sizing: border-box;
    padding-top: 120rpx;
    .tips {
      font-size: 26rpx;
      color: #fff;
      font-family: 'fz';
      margin-left: 55rpx;
      margin-bottom: 28rpx;
      text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.56);
    }
    .buttons {
      position: absolute;
      bottom: 100rpx;
      left: 0;
      width: 100%;
      padding: 0 52rpx;
      box-sizing: border-box;
    }
    .card {
      min-height: 40vh;
      max-height: 70vh;
      overflow-y: auto;
      background: #fff;
      box-shadow: 0rpx 19rpx 37rpx 0rpx rgba(0, 0, 0, 0.04);
      border-radius: 26rpx;
      padding: 37rpx 42rpx;
      box-sizing: border-box;

      &-tab {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #ffffff;
        border-radius: 37rpx;
        border: 2rpx solid #be8e38;
        padding: 8rpx;
        box-sizing: border-box;
        width: 388rpx;
        height: 74rpx;
        margin: 0 auto;
        .card-tab-item {
          width: 188rpx;
          height: 59rpx;
          border-radius: 33rpx;
          color: #be8e38;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 26rpx;
          transition: all 0.3s ease;
          font-family: 'fz';
        }
        .active {
          background: #dab97b;
          color: #fff;
          font-size: 28rpx;
          font-family: 'fz-bold';
        }
      }
      &-list {
        width: 100%;
        height: 100%;
        .card-list-item {
          height: 180rpx;
          border-bottom: 2rpx solid #efefef;
          display: flex;
          align-items: center;
          &-icon {
            width: 68rpx;
            height: 80rpx;
          }
          &-right {
            margin-left: 44rpx;
            .record-name {
              font-size: 34rpx;
              color: #1d1e25;
              font-family: 'fz-bold';
              margin-bottom: 8rpx;
            }
            .record-time {
              font-size: 26rpx;
              color: #a0a0a0;
              font-family: 'fz';
              display: flex;
              align-items: center;
              font-size: 0rpx;
            }
          }
        }
        .card-list-item:last-child {
          border-bottom: none;
        }
      }
    }
  }

  .detail {
    padding-top: 70rpx;
    .title {
      font-size: 37rpx;
      color: #d3a358;
      font-family: 'fz-bold';
      margin-bottom: 28rpx;
    }
    .line {
      margin: 28rpx 0;
      height: 2rpx;
      background: #efefef;
    }
    .info {
      font-size: 30rpx;
      color: #1d1e25;
      font-family: 'fz';
      line-height: 35rpx;
      margin-bottom: 12rpx;
    }
    .qrcode {
      width: 425rpx;
      height: 425rpx;
      margin: 35rpx auto;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}
